<template>
  <div id="RoomDeatil">
    <div class="content">
      <div class="overflow-auto">
        <el-tabs v-model="activeName"
                 style="background:white"
                 @tab-click="handleClick">
          <!-- tab 房型信息 -->
          <el-tab-pane label="房型信息"
                       name="first">
            <div style="padding:16px">
              <div style="width:100%">
                <el-card class="box-card">
                  <el-page-header @back="goBack"
                                  style="width:100%;color: #409eff;"
                                  content="房型详情"></el-page-header>

                  <el-form ref="form"
                           style="padding-top:77px;padding-left:144px;position:relative"
                           :model="form"
                           label-width="80px">
                    <span style="position: absolute;left: 0%;top:10%">{{form.roomInfo.title}}</span>
                    <el-form-item label="PMS系统房型"></el-form-item>
                    <el-form-item label="渠道房型">
                      <el-input v-model="form.roomInfo.channel"
                                style="width:60%"></el-input>
                    </el-form-item>
                    <el-form-item label="房型简介">
                      <el-input type="textarea"
                                :rows="2"
                                style="width:60%"
                                placeholder="请输入内容"
                                v-model="form.roomInfo.textarea">
                      </el-input>
                    </el-form-item>
                    <el-form-item label="门店区域">
                      <el-input v-model="form.roomInfo.area"
                                style="width:60%"></el-input>
                    </el-form-item>
                    <el-form-item label="详情地址">
                      <el-input v-model="form.roomInfo.adress"
                                style="width:60%"></el-input>
                    </el-form-item>
                    <el-form-item label="坐标地址">
                      <el-input v-model="form.roomInfo.coordinates"
                                style="width:60%"></el-input>
                    </el-form-item>
                  </el-form>
                </el-card>
              </div>
              <!-- 房型规格 -->
              <div style="width:100%;margin-top: 20px;">
                <el-card class="box-card">
                  <el-form ref="form"
                           style="padding-top:77px;padding-left:144px;position:relative"
                           :model="form"
                           label-width="80px">
                    <span style="position: absolute;left: 0%;top:10%">{{form.specification.title}}</span>

                    <el-form-item label="宜住人数">
                      <el-input-number size="mini"
                                       v-model="form.specification.num"></el-input-number>
                    </el-form-item>
                    <el-form-item label="楼层">
                      <el-input v-model="form.specification.floor"
                                style="width:200px"></el-input> 楼
                    </el-form-item>
                    <el-form-item label="床数量">
                      <el-input-number size="mini"
                                       v-model="form.specification.bed"></el-input-number>
                    </el-form-item>
                    <el-form-item label="床尺寸">
                      <el-input v-model="form.specification.bedSize.long"
                                style="width:200px;margin-right: 20px;"></el-input>米
                      <el-input v-model="form.specification.bedSize.wide"
                                style="width:200px;margin-right: 20px;margin-left: 20px;"></el-input>米
                    </el-form-item>
                  </el-form>
                </el-card>
              </div>
              <!-- 房型配置 -->
              <div style="width:100%;margin-top: 20px;">
                <el-card class="box-card">
                  <el-form ref="form"
                           style="padding-top:77px;padding-left:144px;position:relative"
                           :model="form"
                           label-width="80px">
                    <span style="position: absolute;left: 0%;top:10%">{{form.configuration.title}}</span>
                    <el-form-item label="餐食说明">
                      <el-input style="width:200px"></el-input>
                    </el-form-item>
                    <el-form-item label="窗户">
                      <el-input style="width:200px"></el-input>
                    </el-form-item>
                    <el-form-item label="吸烟许可">
                      <el-input style="width:200px"></el-input>
                    </el-form-item>
                    <el-form-item label="网络情况">
                      <el-input style="width:200px"></el-input>
                    </el-form-item>
                  </el-form>
                </el-card>
              </div>
              <!-- 保存 -->
              <div style="width:100%;margin-top: 20px;">
                <el-card class="box-card"
                         style="display:flex;flex-direction:row-reverse ">
                  <el-button type="primary">保存并更新</el-button>
                </el-card>
              </div>
            </div>
          </el-tab-pane>
          <!-- tab 房型主题 -->
          <el-tab-pane label="房型主题"
                       name="second">
            <div style="padding:16px">
              <el-card class="box-card">
                <el-form ref="form"
                         style="padding-top:77px;padding-left:144px;position:relative"
                         :model="form"
                         label-width="80px">
                  <span style="position: absolute;left: 0%;top:10%">{{form.roomTheme.title}}</span>
                  <el-radio-group v-model="form.roomTheme.radio">

                    <el-radio :label="radio.label"
                              v-for="radio in form.roomTheme.roomRadio"
                              :key="radio.label">{{radio.name}}</el-radio>

                  </el-radio-group>
                  <div style="margin-top:20px"
                       v-if="form.roomTheme.radio==3">
                    <span>电脑配置</span>
                    <br>
                    <div style="display:flex;flex-wrap:wrap;width: 100%;">
                      <el-form-item :label="input.title"
                                    label-width="100px"
                                    v-for="input in form.computer_configuration "
                                    :key="input.title">
                        <el-input style="width:160px"
                                  v-model="form.name"></el-input>
                      </el-form-item>
                    </div>

                  </div>
                </el-form>
              </el-card>
              <el-card style="margin-top:30px">
                <el-form :model="form"
                         style="padding-top:77px;padding-left:144px;position:relative">
                  <span style="position: absolute;left: 0%;top:10%">{{form.roomPhoto.title}}</span>
                  <div>
                    <span style="color: #666666;font-size: 12px;">至少1张图片（请上传文件大小10M以下，尺寸不小400 x 300像素的横版清晰图片）</span>
                    <el-upload drag
                               action="https://jsonplaceholder.typicode.com/posts/"
                               multiple>
                      <i class="el-icon-picture-outline"></i>
                      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                      <div class="el-upload__tip"
                           slot="tip">只能上传jpg/png文件，且不超过500kb</div>
                    </el-upload>

                  </div>
                </el-form>
              </el-card>
              <!-- 保存 -->
              <div style="width:100%;margin-top: 20px;">
                <el-card class="box-card"
                         style="display:flex;flex-direction:row-reverse ">
                  <el-button type="primary">保存并更新</el-button>
                </el-card>
              </div>
            </div>
          </el-tab-pane>
          <!-- tab 服务设施 -->
          <el-tab-pane label="服务设施"
                       class="box-card"
                       name="third">
            <div style="padding:16px">
              <el-card class="box-card">
                <el-form :model="form"
                         ref="form"
                         style="padding-top:77px;padding-left:144px;position:relative">
                  <span style="position: absolute;left: 0%;top:10%">{{form.service_facility.title}}</span>
                  <div>
                    <el-checkbox :indeterminate="form.service_facility.hot_facility.isIndeterminate"
                                 v-model="form.service_facility.hot_facility.checkAll"
                                 @change="hot_facilityAllChange">{{form.service_facility.hot_facility.classify}}</el-checkbox>
                    <div style="margin: 15px 0;"></div>
                    <el-checkbox-group v-model="form.service_facility.hot_facility.hot_facility_checked"
                                       @change="hot_facilityChange">
                      <el-checkbox v-for="hot_facility in form.service_facility.hot_facility.hot_facility"
                                   :label="hot_facility"
                                   :key="hot_facility">{{hot_facility}}</el-checkbox>
                    </el-checkbox-group>
                  </div>
                  <!-- 卫浴设施 -->
                  <checkbox :father="form.service_facility.bathroom_facility"></checkbox>
                  <!-- 洗漱用品 -->
                  <checkbox :father="form.service_facility.personal_hygiene_products"></checkbox>
                  <!-- 客房设施-->
                  <checkbox :father="form.service_facility.room_facility"></checkbox>
                  <!-- 其他设施 -->
                  <checkbox :father="form.service_facility.other_facility"></checkbox>
                  <!-- 清洁服务 -->
                  <checkbox :father="form.service_facility.clean_facility"></checkbox>
                  <!-- 客房布局 -->
                  <checkbox :father="form.service_facility.Layout_of_the_rooms"></checkbox>
                  <!-- 网络与通讯 -->
                  <checkbox :father="form.service_facility.Network"></checkbox>
                  <!-- 媒体科技 -->
                  <checkbox :father="form.service_facility.media_technologies"></checkbox>
                  <!-- 室外景观 -->
                  <checkbox :father="form.service_facility.media_technologies"></checkbox>
                  <!--  无障碍设施-->
                  <checkbox :father="form.service_facility.barrier_free"></checkbox>
                  <!-- 儿童设施服务 -->
                  <checkbox :father="form.service_facility.Children_facilities"></checkbox>

                </el-form>
              </el-card>
              <!-- 保存 -->
              <div style="width:100%;margin-top:20px">
                <el-card class="box-card"
                         style="display:flex;flex-direction:row-reverse ">
                  <el-button type="primary">保存并更新</el-button>
                </el-card>
              </div>
            </div>

          </el-tab-pane>

        </el-tabs>

      </div>
    </div>
  </div>

</template>

<script>
const hot_facility_arr = ['24小时热水', '吹风机', '洗发水', '牙膏', '拖鞋', '瓶装水', '牙刷', '沐浴露', '卫生间', '空调', '电视']

import checkbox from '@/components/checkbox/checkbox.vue'
export default {
  components: {
    checkbox
  },
  data () {
    return {
      activeName: 'first',
      form: {
        roomInfo: {
          title: "房型信息",
          roomName: '汤臣一品',
          channel: "",
          area: '',
          adress: '',
          coordinates: ''
        },
        specification: {
          title: '房型规格',
          num: 1,
          floor: 1,
          bed: 1,
          bedSize: {
            long: 100,
            wide: 120
          }
        },
        configuration: {
          title: '房型规格'
        },
        roomTheme: {
          title: '房型主题',
          radio: 1,

          roomRadio: {
            radio1: {
              name: "湖景房",
              label: 1
            },
            radio2: {
              name: "全景房",
              label: 2
            },
            radio3: {
              name: "电竞房",
              label: 3
            },
            radio3: {
              name: "电竞房",
              label: 3
            },
            radio4: {
              name: "山景房",
              label: 4
            },
            radio5: {
              name: "江景房",
              label: 5
            },
            radio6: {
              name: "圆床房号",
              label: 6
            },
            radio7: {
              name: "亲子房",
              label: 7
            },
            radio8: {
              name: "深度睡眠房",
              label: 8
            },
            radio9: {
              name: "家庭房",
              label: 9
            },
            radio10: {
              name: "温泉房",
              label: 10
            },
            radio10: {
              name: "温泉房",
              label: 10
            },
            radio11: {
              name: "棋牌房",
              label: 11
            },
            radio12: {
              name: "水床房",
              label: 12
            },
            radio13: {
              name: "酒店套餐",
              label: 13
            },
            radio14: {
              name: "影音房",
              label: 14
            },
            radio15: {
              name: "情侣房",
              label: 15
            },
          }
        },
        computer_configuration: {
          CPU: { title: 'CPU', input: '' },
          GPU: { title: '显卡', input: '' },  //显卡
          RAM: { title: '内存', input: '' },  //内存
          DISPLAYER_BRAND: { title: '显示器品牌', input: '' }, //显示器品牌
          DISPLAYER_TYPE: { title: '屏幕类型', input: '' }, //屏幕类型
          DISPLAYER_SIZE: { title: '屏幕尺寸', input: '' }, //屏幕尺寸
          DISPLAYER_DPI: { title: '显示器分辨率', input: '' }, //显示器分辨率
          DISPLAYER_HZ: { title: '显示器刷新率', input: '' }, //显示器刷新率
          HEADSET_BRAND: { title: '耳机品牌', input: '' },  //耳机品牌
          KEYBOARD_BRAND: { title: '键盘品牌', input: '' },  //键盘
          MOUSE_BRAND: { title: '鼠标品牌', input: '' },  //鼠标品牌
          CHAIR_BRAND: { title: '电竞椅子品牌', input: '' },  //电竞椅子品牌
        },
        roomPhoto: {
          title: '房型图片',
          arrPhoto: {

          }
        },
        service_facility: {
          title: '服务设施',
          hot_facility: {
            classify: '热门设施',
            checkAll: false,
            hot_facility: hot_facility_arr,
            hot_facility_checked: [],
            isIndeterminate: true
          },

          bathroom_facility: {
            classify: '卫浴设施',
            Array: ['浴室化妆镜', '浴巾', '浴室配置', '浴缸', '智能马桶', '前台保险柜']
          },
          personal_hygiene_products: {
            classify: '洗漱用品',
            Array: ['护发素', '浴帽', '剃须刀', '香皂', '桃子', '毛巾']
          },
          room_facility: {
            classify: '客房设施',
            Array: ['电风扇', '空气净化器', '地毯', '窗帘', '暖气', '地暖', '床上用品']
          },
          other_facility: {
            classify: '其他设施',
            Array: ['雨伞', '针线包', '行政酒廊待遇', '衣架', '插座', '露营设施', '欢迎礼品', '电子秤', '娱乐活动', '管家服务']

          },
          clean_facility: {
            classify: '清洁服务',
            Array: ['熨衣设备', '熨裤机', '每日打扫', '干衣机', '洗衣机', '洗衣用品', '打扫工具']
          },
          Layout_of_the_rooms: {
            classify: '客房布局',
            Array: ['书桌', '用餐区', '衣柜', '私人泳池', '沙发', '茶几', '挂墙装饰画', '壁炉', '花园', '阳台', '私人温泉', '餐桌', '休闲椅', '露台']
          },
          Network: {
            classify: '网络与通讯',
            Array: ['国际长途电话', '客房WIFI', '电话', '智能手机']
          },
          media_technologies: {
            classify: '媒体科技',
            Array: ['游戏机', '智能门锁', '投影仪', '电脑', '音响', '智能客控']
          },
          Food_and_Drinks: {
            classify: '媒体科技',
            Array: ['电热水壶', '迷你吧', '速食品', '酒精饮料', '咖啡壶', '咖啡机', '茶包', '软饮', '小食']
          },
          kitchen_facility: {
            classify: '厨房用品',
            Array: ['冰箱', '烤箱', '厨房', '微波炉', '抽油烟机', '餐具', '厨房清洁用品', '烤面包机', '洗碗机', '调味品', '电饭煲', '炉灶', '厨房用具']
          },
          landscape: {
            classify: '室外景观',
            Array: ['城景', '河景', '湖景', '享有风景', '泳池池景', '高尔夫球场景观', '山景', '花园景', '公园景', '海港景', '山谷景', '火山景', '地标景', '庭院景', '湾景']
          },
          barrier_free: {
            classify: '无障碍设施',
            Array: ['无障碍通道', '坐便器-带扶手', '淋浴座椅', '淋浴栏杆', '盲文标牌', '天花吊机', '改造生活区', '无障碍卫生间', '无障碍淋浴', '浴缸-带扶手', '浴室-带紧急按钮', '卧室紧急按钮', '隐藏式字幕电视', '杠杆门把手', '改造门宽', '无障碍客房', '听力无障碍设施']
          },
          Children_facilities: {
            classify: '儿童设施',
            Array: ['其他设施', '儿童洗漱用品', '儿童面巾', '儿童浴巾', '儿童马桶圈', '儿童防滑凳', '儿童餐具', '奶瓶消毒器', '儿童防护设施', '婴儿浴盆', '儿童餐椅', '儿童浴袍', '儿童拖鞋', '桌角防护', '儿童玩具', '便携式婴儿床']
          }
        }
      }
    }
  },
  methods: {
    goBack () {

    },
    handleClick (tab, event) {
      console.log(tab, event);
    },
    // 热门设施
    hot_facilityAllChange (val) {
      this.form.service_facility.hot_facility.hot_facility_checked = val ? hot_facility_arr : [];
      this.form.service_facility.hot_facility.isIndeterminate = false;
    },
    hot_facilityChange (value) {
      let checkedCount = value.length
      this.form.service_facility.hot_facility.checkAll = checkedCount === this.form.service_facility.hot_facility.hot_facility.length;
      this.form.service_facility.hot_facility.isIndeterminate = checkedCount > 0 && checkedCount < this.form.service_facility.hot_facility.hot_facility.length;
    },
    // 卫浴设施

  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-tabs__header {
  padding-left: 20px;
  height: 56px;
  line-height: 56px;
  margin: 0px;
}
::v-deep.el-tab-pane {
  background-color: #f6f8ff;
}
// 隐藏滚动条
* {
  ::-webkit-scrollbar {
    /*隐藏滚轮*/
    display: none;
  }
}
.content {
  width: 100%;
  height: 100%;
  overflow: hidden;
  .overflow-auto {
    width: 97%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: auto;
    position: absolute;
    /*index.scss*/

    .box-card {
      // margin-top: 20px;
      width: 100%;
    }
  }
}
</style>